import React, { useEffect, useState } from 'react';
import { Card, Divider, Switch, Tag, Transfer } from '@douyinfe/semi-ui';
import AppTree from './components/app-tree';
import { TreeNodeData } from '@douyinfe/semi-ui/lib/es/tree';
import { useParams } from 'react-router-dom';
import { shallowEqual, useSelector } from 'react-redux';
import { IRootReducerState } from '@/store/root-reducer';
import { useDispatch } from 'react-redux';
import { fetchItem } from '@/redux/role/role-actions';
import AppMenuTree from './components/app-menu-tree';

export default () => {
  const { id } = useParams();
  const [collapse, setCollapse] = useState<any>(true);
  const dispatch = useDispatch<any>();
  const { role } = useSelector<IRootReducerState, any>(
    (state) => ({ role: state.role }),
    shallowEqual
  );
  const { entity } = role;
  useEffect(() => {
    if (!id) return;
    dispatch(fetchItem(id));
  }, [id]);

  const [selectAppId, setSelectAppId] = useState<any>();
  const treeData = [
    {
      label: 'Asia',
      value: 'Asia',
      key: '0',
      children: [
        {
          label: 'China',
          value: 'China',
          key: '0-0',
          children: [
            {
              label: 'Beijing',
              value: 'Beijing',
              key: '0-0-0',
            },
            {
              label: 'Shanghai',
              value: 'Shanghai',
              key: '0-0-1',
            },
            {
              label: 'Chengdu',
              value: 'Chengdu',
              key: '0-0-2',
            },
          ],
        },
        {
          label: 'Japan',
          value: 'Japan',
          key: '0-1',
          children: [
            {
              label: 'Osaka',
              value: 'Osaka',
              key: '0-1-0',
            },
          ],
        },
      ],
    },
    {
      label: 'North America',
      value: 'North America',
      key: '1',
      children: [
        {
          label: 'United States',
          value: 'United States',
          key: '1-0',
        },
        {
          label: 'Canada',
          value: 'Canada',
          key: '1-1',
        },
        {
          label: 'Mexico',
          value: 'Mexico',
          disabled: true,
          key: '1-2',
        },
        {
          label: 'Cuba',
          value: 'Cuba',
          key: '1-3',
        },
      ],
    },
  ];
  return (
    <>
      <div className='w-full flex flex-row'>
        <div className='flex flex-col w-1/3'>
          <div className='flex flex-col'>
            <div className='mb-5'>
              角色：
              <Tag color='blue' type='light'>
                {entity?.name}
              </Tag>
            </div>
            <span>应用列表</span>
          </div>
          <AppTree
            roleId={id}
            onSelectItem={(data) => {
              setSelectAppId(data?.id);
              console.log('选择应用', data);
            }}
          />
        </div>
        <Divider
          layout='vertical'
          dashed={true}
          margin='12px'
          className='h-full'
        />
        <div className='flex flex-col w-2/3'>
          <div className='flex flex-col'>
            <div className='mb-5 flex flex-row'>
              <span>菜单权限：</span>
              <span>全部展开/折叠：</span>
              <Switch
                defaultChecked={true}
                size='small'
                aria-label='a switch for demo'
                onChange={(e) => {
                  console.log('开关--->', e);
                  setCollapse(e);
                }}
              ></Switch>
            </div>
            <AppMenuTree
              appId={selectAppId}
              allSelect
              collapse={collapse}
              onSelectItem={(data) => {
                console.log('选择菜单', data);
              }}
            />
          </div>
        </div>
      </div>
    </>
  );
};
